<template>
  <div class="operate-log">
    <!-- 查询表单 start -->
    <ui-form :model="queryForm" class="query-form">
      <ui-form-item label="潜客类型">
        <ui-select v-model="queryForm.types" placeholder="请选择潜客类型">
          <ui-option :value="0" label="成功"></ui-option>
          <ui-option :value="1" label="失败"></ui-option>
        </ui-select>
      </ui-form-item>
      <ui-form-item label="所属机构">
        <ui-select v-model="queryForm.types" placeholder="请选择所属机构">
          <ui-option :value="0" label="成功"></ui-option>
          <ui-option :value="1" label="失败"></ui-option>
        </ui-select>
      </ui-form-item>
      <ui-form-item label="潜客状态">
        <ui-select v-model="queryForm.types" placeholder="请选择潜客状态">
          <ui-option :value="0" label="成功"></ui-option>
          <ui-option :value="1" label="失败"></ui-option>
        </ui-select>
      </ui-form-item>
      <ui-form-item label="潜客来源渠道">
        <ui-select v-model="queryForm.types" placeholder="请选择潜客来源渠道">
          <ui-option :value="0" label="成功"></ui-option>
          <ui-option :value="1" label="失败"></ui-option>
        </ui-select>
      </ui-form-item>
      <ui-form-item label="客户名称">
        <ui-input type="text" placeholder="请输入客户名称" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item label="证件号码">
        <ui-input type="text" placeholder="请输入证件号码" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item label="客户经理">
        <ui-input type="text" placeholder="请输入客户经理" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item label="手机号">
        <ui-input type="number" placeholder="请输入手机号" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item>
        <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
        <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
      </ui-form-item>
    </ui-form>
    <!-- 查询表单 end -->
    <!-- 数据表格 start -->
    <vx-nodata :list="tableData" v-loading="isLoading" sub-title="暂无数据">
      <!-- 表格 -->
      <vx-table :tableData="tableData" :isSelect="true" :columns="columns"
        :buttomGroup="buttomGroup" @updataData="updataData"></vx-table>
      <!-- 表格完 -->
      <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout"
        :page-sizes="pageSizeList" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </ui-pagination>
    </vx-nodata>
    <!-- 数据表格 end -->
  </div>
</template>
  
<script>
import poerateLogApi from '@/api/operate-log';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
import vxTable from '@/components/vx-table';
export default {
  name: 'ProwerInquire',
  mixins: [pagination],
  data() {
    return {
      queryForm: {
        operTime: [],
        types: '',
        searchName: ''
      }, // 查询表单
      operatorType: [], // 操作类型列表
      tableData: [{ userName: 888,updatedBy:99999,createdBy:6666 }], // 列表数据
      isLoading: false, // 查询列表loading
      layout: 'prev, pager, next, total',
      columns: [
        {
          prop: 'userName',
          label: '1111',
          fixed: true,
          width: '120'
        }, {
          prop: 'updatedBy',
          label: '2111',
          fixed: true
        },
        {
          prop: 'createdBy',
          label: '311',
          fixed: true,
          formatter: (row, column, cellValue, index) => {
            // return wordcut(cellValue, 3, 4);
          }
        }
      ], //表头
      buttomGroup: [
        { label: '修改', methodsName: 'updataData' }
      ] // 操作按钮
    };
  },
  components: {
    vxTable
  },
  created() {

  },
  methods: {
    /**
     * 获取详情
     * @param {object} value 当前列表数据
     */
    updataData(value) {
      this.$router.push({
        path: '/ProwerInquire/AttributionHistory',
      })
    },
    /**
     * 格式化操作类型字段
     * @param {number} value 操作类型值
     * @returns {string} 格式化后的操作类型名称
     */
    format(value) {
      let result = this.operatorType.find((i) => i.dictCode === value);
      if (result) {
        return result.dictName;
      } else {
        return '其他';
      }
    },
    /**
     * 获取操作类型选项
     */
    async queryOperatorType() {
      try {
        const res = await poerateLogApi.dictByType({ types: 'operator_type' });
        if (res.data.operator_type) {
          this.operatorType = res.data.operator_type.map((item) => {
            // 将dictCode隐式转换为number类型
            item.dictCode = item.dictCode - 0;
            return item;
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    /**
     * 查询操作日志
     * @param {boolean} val 是否重置当前页签
     */
    async searchList(val) {
    },
    /**
     * 重置
     */
    reset() {
      this.queryForm = { operTime: [] };
      this.currentPage = 1;
      this.searchList();
    },
  },
};
</script>
  
<style lang="scss">
.operate-log {

  .ui-icon-plus,
  .ui-icon-search {
    color: #fff;
  }

  .vx-dialog.ui-dialog {
    width: 750px;
  }

  .success {
    color: $color-success;
  }

  .error {
    color: $color-danger;
  }
}
</style>
  